<template>
  <el-container>
    <el-main>

      <el-table :data="goodsPackage">
        <el-table-column align="center" label="菜品" width="140">
          <!--          图片展示-->
          <template slot-scope="scope">
            <div class="demo-image__preview">

              <el-image
                @click="byid(scope.row.gpid)"
                style="width: 100px; height: 100px"
                :src="scope.row.gpimg"
              >
              </el-image>

            </div>
          </template>


        </el-table-column>
        <el-table-column prop="gpname" align="center" label="名称" width="140">
        </el-table-column>
        <el-table-column prop="gpprice" align="center" label="单价" width="140">
        </el-table-column>
        <el-table-column align="center" label="数量" width="180">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.pdnumber" :step="1" size="mini" :min="1" :max="10" step-strictly/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="加入购物车">
          <template slot-scope="scope">

            <el-button type="danger" round @click="setCar(scope.row.pdnumber,scope.row.gpid)">加入购物车</el-button>
          </template>

          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>
    </el-main>

  </el-container>

</template>

<script>
  import axios from 'axios';

  export default {
    name: "goodspackage",

    data(){
      return{
        //套餐：
        goodsPackage: [{
          pdnumber:'',
          gpid:''
        }

        ]
      }
    },
    methods: {

      findAll: function () {
        var _this = this
        axios.post("/api/goodsPackage/findAll").then(function (res) {
          _this.goodsPackage=res.data

        })
      },
      setCar: function (pdnumber, gpid) {
        axios.post(`/api/goodsPackage/setPackageCar/${pdnumber}/${gpid}`)
      }
    },
  mounted() {

    this.findAll()

    }
  }

</script>

<style scoped>

</style>
